<template>
  <div class="layout">
    <el-container>
      <el-header class="header">
        <div class="logo">
          <span class="iconfont icon-tanx"></span>
        </div>
        <div class="user-info">
          <span class="welcome">欢迎回来: </span>
          <el-dropdown>
            <span>
              <span class="el-dropdown-link nickname">{{
                userInfo.nickName
              }}</span>
              <span class="iconfont icon-open"></span>
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>
                  <router-link :to="settingPath" class="a-link2"
                    >个人信息</router-link
                  >
                </el-dropdown-item>
                <el-dropdown-item @click="logOut">退出</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
          <div class="avatar"><img :src="userInfo.avatar" /></div>
        </div>
      </el-header>
      <el-container class="container">
        <el-aside class="left-aside">
          <div>
            <el-button class="post-button" @click="createHtml">发布</el-button>
          </div>
          <div class="menu-panel">
            <ul>
              <li v-for="(menu, index) in menuList" :key="menu.icon">
                <span class="menu-title-p" @click="openClose(index)">
                  <span :class="['iconfont', menu.icon]"></span>
                  <span class="menu-title">{{ menu.title }}</span>
                  <span
                    :class="[
                      'iconfont',
                      'open-close',
                      menu.open ? 'icon-close' : 'icon-open',
                    ]"
                  ></span>
                </span>

                <ul class="sub-menu" v-show="menu.open">
                  <li v-for="subMenu in menu.children" :key="subMenu.path">
                    <router-link
                      :to="subMenu.path"
                      :class="[
                        'sub-menu-item',
                        activePath == subMenu.path ? 'active' : '',
                      ]"
                      >{{ subMenu.title }}</router-link
                    >
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </el-aside>
        <el-main class="right-main"
          ><router-view @callback="updateUserInfo"
        /></el-main>
      </el-container>
    </el-container>
    <Dialog
      :show="progressDialog.show"
      :title="progressDialog.title"
      :button="progressDialog.buttons"
      @close="progressDialog.show = false"
      :show-close="false"
      :showCancel="false"
      width="266px"
    >
      <div class="progress-container">
        <div class="progress-panel">
          <el-progress
            type="circle"
            :percentage="progressInfo.progress"
            :status="progressInfo.status"
            :color="colors"
          ></el-progress>
        </div>
        <div class="error" v-if="progressInfo.result == 1">
          <div>生成页面出错了：{{ progressInfo.errorMsg }}</div>
          <div class="info">具体错误，请查看服务器日志</div>
        </div>
        <div
          class="success"
          v-if="progressInfo.progress == 100 || progressInfo.result == 0"
        >
          <el-button
            class="btn"
            type="primary"
            @click="progressDialog.show = false"
          >
            关闭</el-button
          >
        </div>
      </div>
    </Dialog>
  </div>
</template>

<script setup>
import { useStore } from "vuex";
import VueCookies from "vue-cookies";
import { getCurrentInstance, reactive, ref } from "vue";
import { useRouter, useRoute } from "vue-router";
import { watch } from "vue";
const api = {
  getUserInfo: "getUserInfo",
  logout: "logout",
  createHtml: "createHtml",
  checkProgress: "checkProgress",
};

const colors = [
  { color: "#f56c6c", percentage: 20 },
  { color: "#e6a23c", percentage: 40 },
  { color: "#6f7ad3", percentage: 60 },
  { color: "#1989fa", percentage: 80 },
  { color: "#5cb87a", percentage: 100 },
];

const store = useStore();
const router = useRouter();
const route = useRoute();
const { proxy } = getCurrentInstance();
const menuList = ref([
  {
    title: "博客",
    icon: "icon-blog",
    open: true,
    children: [
      {
        title: "博客管理",
        path: "/blog/list",
      },
      {
        title: "分类管理",
        path: "/blog/category",
      },
    ],
  },
  {
    title: "专题",
    icon: "icon-zhuanti",
    open: true,
    children: [
      {
        title: "专题管理",
        path: "/special/list",
      },
    ],
  },
  {
    title: "设置",
    icon: "icon-setting",
    open: true,
    children: [
      {
        title: "个人信息设置",
        path: "/setting/my",
      },
      {
        title: "博客成员",
        path: "/setting/user",
      },
      {
        title: "系统设置",
        path: "/setting/sysSetting",
      },
    ],
  },
  {
    title: "回收站",
    icon: "icon-recovery",
    open: true,
    children: [
      {
        title: "回收站",
        path: "/recovery/list",
      },
    ],
  },
]);
const settingPath = ref("/setting/my");

const openClose = (index) => {
  menuList.value[index].open = !menuList.value[index].open;
};

const userInfo = ref({});
const init = () => {
  getUserInfo();
};
init();

async function getUserInfo() {
  let result = await proxy.Request({
    url: api.getUserInfo,
  });
  if (!result) {
    return;
  }
  userInfo.value = result.data;
  // console.log(userInfo.value);
  userInfo.value.avatar = proxy.globalInfo.imageUrl + userInfo.value.avatar;
}

const activePath = ref(null);

// watch(
//   route,
//   (newVal, oldVal) => {
//     activePath.value = newVal.path;
//     // console.log(activePath);
//   },
//   { immediate: true, deep: true }
// );
watch(
  () => store.state.userInfo,
  (newVal, oldVal) => {
    const avatar = proxy.globalInfo.imageUrl + newVal.avatar;
    const nickName = newVal.nickName;
    userInfo.value = { avatar, nickName };
  },
  { immediate: true, deep: true }
);

const updateUserInfo = () => {
  getUserInfo();
};

// 登出
const logOut = (data) => {
  proxy.Confirm(`你去定要退出吗`, async () => {
    let result = await proxy.Request({
      url: api.logout,
    });
    if (!result) {
      return;
    }
    router.push("/login");
  });
};

// 发布
const progressDialog = reactive({
  title: "发布",
  buttons: [],
  show: false,
});

const progressInfo = reactive({
  progress: 0,
});

let checkTimer = null;
const createHtml = async () => {
  progressDialog.show = true;
  progressInfo.info = 0;
  progressInfo.status = undefined;
  let result = await proxy.Request({
    url: api.createHtml,
  });
  if (!result) {
    return;
  }
  checkProgress();
  checkTimer = setInterval(() => {
    checkProgress();
  }, 1000);
};

const checkProgress = async () => {
  let result = await proxy.Request({
    url: api.checkProgress,
    showLoading: false,
  });
  if (!result) {
    return;
  }
  if (result.data.result == 0) {
    progressInfo.status = "exception";
    progressInfo.errorMsg = result.data.errorMsg;
  } else {
    progressInfo.progress = result.data.progress;
  }
  progressInfo.result = result.data.result;
  if (
    (result.data.progress == 100 || result.data.result == 0) &&
    checkTimer != null
  ) {
    clearInterval(checkTimer);
  }
};
</script>

<style lang="scss" scoped>
.layout {
  .header {
    border-bottom: 1px solid #ddd;
    line-height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .logo {
      .iconfont.icon-tanx {
        // line-height: 84px;
        font-size: 25px;
      }
    }
    .user-info {
      font-weight: 200;
      display: flex;
      align-items: center;
      // height: 20px;
      // line-height: 20px;
      .welcome {
        margin-right: 5px;
      }
      .nickname {
        color: #418fce;
      }
      .icon-open {
        font-size: 14px;
      }
      .avatar {
        margin-left: 10px;
        width: 38px;
        height: 38px;
        border-radius: 25px;
        background: #ddd;
        display: flex;
        justify-content: center;
        align-content: center;
        img {
          border-radius: 25px;
          width: 100%;
        }
      }
    }
  }
  .container {
    padding: 0px 15px;
    background: #f3f4f6;
    height: calc(100vh - 60px);
    .left-aside {
      padding: 15px;
      width: 249px;
      .post-button {
        background: #c05950;
        color: #fff;
        height: 40px;
        width: 100%;
      }
      .menu-panel {
        ul,
        li {
          padding: 0px;
          margin: 0px;
          list-style: none;
          // margin-bottom: 15px;
        }

        .menu-title-p {
          padding: 0 5px;
          display: flex;
          line-height: 45px;
          .iconfont {
            color: #18191c;
          }
          .menu-title {
            flex: 1;
            color: #323336;
            font-size: 18px;
            margin-left: 15px;
          }
          .open-close {
            width: 20px;
          }
        }
        .menu-title-p:hover {
          background: #eaeaea;
        }
        .sub-menu {
          margin-bottom: 5px;
          font-style: 14px;

          .sub-menu-item {
            padding-left: 35px;
            display: block;
            line-height: 40px;
            text-decoration: none;
            color: #18191c;
          }
          .active {
            color: #c05950;
            background: #eaeaea;
          }
          .sub-menu-item:hover {
            background: #eaeaea;
            color: #c05950;
            cursor: pointer;
          }
        }
      }
    }
    .right-main {
      position: relative;
      background: #fff;
      padding: 20px 5px 5px 5px;
    }
  }
  .progress-container {
    text-align: center;
    .btn {
      margin-top: 18px;
    }
  }
}
</style>
